<template>
  <div class="adevice-collectparams">
    <h2>{{selectRow.name}} 能效阈值设置:</h2>
    <Table border :columns="columns" :data="tableData" size="small"></Table>
    <Modal v-model="dialog" title="能效阈值设置">
      <Form ref="formValidateRef" :model="sleleItem" :rules="ruleValidate" :label-width="120">
        <template v-if="sleleItem.param =='运营时段'">
          <FormItem label="参数名称:" style="margin-bottom:0;">
            <span>{{sleleItem.param}}</span>
          </FormItem>
          <FormItem label="阈值:" style="padding-right: 80px;" prop="thresholdValue">
            <Input style="width: 60%;" v-model.trim="sleleItem.thresholdValue" placeholder="请输入阈值..." />
            <span>{{sleleItem.unit}}</span>
            <p>（例如：9:00-19:00）</p>
          </FormItem>
        </template>
        <template v-else>
          <FormItem label="参数名称:" style="margin-bottom:0;">
            <span>{{sleleItem.param}}</span>
          </FormItem>
          <FormItem label="阈值:" prop="thresholdValue" style="padding-right: 80px;">
            <Input v-model.trim="sleleItem.thresholdValue" placeholder="请输入...." style="width: 60%;" />
            <span>{{sleleItem.unit}}</span>
          </FormItem>
        </template>
      </Form>
      <div slot="footer">
        <Button type="text" @click="dialog=false">取消</Button>
        <Button type="primary" @click="confirmOk">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
const DEVICE_PARAMS = [
  {
    thresholdNumber: 1,
    param: "变压器超载值"
  },
  {
    thresholdNumber: 2,
    param: "变压器满载值"
  },
  {
    thresholdNumber: 3,
    param: "变压器重载值"
  },
  {
    thresholdNumber: 4,
    param: "有功功率限值"
  },
  {
    thresholdNumber: 5,
    param: "视在功率限值"
  },
  {
    thresholdNumber: 6,
    param: "电压上限值"
  },
  {
    thresholdNumber: 7,
    param: "电压下限值"
  },
  {
    thresholdNumber: 8,
    param: "相电流越线值"
  },
  {
    thresholdNumber: 9,
    param: "零线电流越线值"
  },
  {
    thresholdNumber: 10,
    param: "三相电压不平衡限值"
  },
  {
    thresholdNumber: 11,
    param: "三流电压不平衡限值"
  },
  {
    thresholdNumber: 12,
    param: "功率因数限值"
  },
  {
    thresholdNumber: 13,
    param: "谐波限值"
  },
  {
    thresholdNumber: 14,
    param: "日电能增长率限值"
  },
  {
    thresholdNumber: 15,
    param: "月电能增长率限值"
  },
  {
    thresholdNumber: 16,
    param: "运营时段"
  },
  {
    thresholdNumber: 17,
    param: "运营时段电量限值"
  },
  {
    thresholdNumber: 18,
    param: "非运营时段电量限值"
  }
]

import { getThreshold, updateThreshold, getDeviceDetail } from "@/api"
import { validateNengXiaoYuZhi } from "@/utils/rules"

export default {
  mounted() {
    this.getInitialState().then(() => {
      this._getList()
    })
  },
  data() {
    return {
      selectRow: {},
      sleleItem: {},
      dialog: false,
      ruleValidate: {
        thresholdValue: [
          {
            required: true,
            trigger: "blur",
            validator: validateNengXiaoYuZhi("阈值", "请输入合法阈值")
          }
        ]
      },
      columns: [
        {
          title: "参数名称",
          key: "param",
          align: "center"
        },
        {
          title: "阈值",
          key: "thresholdValue",
          align: "center"
        },
        {
          title: "更新时间",
          align: "center",
          render: (h, params) => {
            let time = params.row.updatedAt
            if (!time) return h("span", "暂无")
            return h("span", this.moment(time).format("YYYY-MM-DD HH:mm:ss"))
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            const row = { ...params.row }
            return h(
              "Button",
              {
                props: {
                  size: "small"
                },
                on: {
                  click: () => {
                    this.dialog = true
                    let _thatRow = { ...row }
                    this.$nextTick(_ => {
                      this.$refs.formValidateRef.resetFields()
                      this.sleleItem = { ..._thatRow }
                    })
                  }
                }
              },
              "更新"
            )
          }
        }
      ],
      tableData: []
    }
  },
  methods: {
    getInitialState() {
      const params = this.$route.params
      return new Promise(resolve => {
        getDeviceDetail(params.id).then(res => {
          if (res.code === 200) {
            this.selectRow = res.data
            resolve(res.data)
          }
        })
      })
    },
    confirmOk() {
      let vm = this
      this.$refs.formValidateRef.validate(valid => {
        let params = {
          deviceId: vm.selectRow.id,
          thresholdNumber: vm.sleleItem.thresholdNumber,
          thresholdValue: vm.sleleItem.thresholdValue
        }
        if (valid) {
          updateThreshold(params).then(res => {
            if (res.code == 200) {
              this._getList()
              this.$Message.success("操作成功")
              this.dialog = false
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    _getList() {
      let params = {
        deviceId: this.selectRow.id
      }
      getThreshold(params).then(res => {
        if ((res.code = 200)) {
          // console.log(
          if (!res.data) {
            this.tableData = DEVICE_PARAMS
          } else {
            this.tableData = res.data
          }
        }
      })
    }
  }
}
</script>
